<template>
  <div>
    <el-input class="input" v-model="filterText" placeholder="搜索业务分类" :suffix-icon="Search" />
    <el-tree
      node-key="id"
      :props="treeProps"
      :data="data"
      ref="treeRef"
      :expand-on-click-node="false"
      :filter-node-method="filterNode"
      @node-click="nodeClick"
      :highlight-current="props.highlight"
    >
        <template #default="{ node, data }">
          <span class="span-ellipsis" >
            <span :title="node.label">{{ node.label }}</span>
          </span>
        </template>
    </el-tree>


  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { ElTree } from 'element-plus'
import { Search } from "@element-plus/icons-vue";
import {getCategoryTreeList} from "@/api/manageKg/classify";
const emit = defineEmits(['nodeClick'])
const props = defineProps({
  highlight: {
    type:Boolean,
    default:()=> true
  }
})
interface Tree {
  id: number;
  name: string;
  parentId?: string | number;
  children?: Tree[];
  isLeaf?: boolean;
}
const treeRef = ref<InstanceType<typeof ElTree>>()
const treeProps = reactive({
  label: "name",
  // children: "itemList",
  isLeaf: "isLeaf",
});

/**
 * 知识分类树结构获取-所有
 */
const data = ref()
const getCategoryTree = () => {
  getCategoryTreeList({}).then(res => {
    data.value = res.data
  })
}
getCategoryTree()

/**
 * 单独刷新节点
 * guid: 当前节点的父级唯一标识节点
 */
const refreshTreeNode = (guid) => {
  let node = (treeRef.value as any).getNode(guid);
  if (node) {
    node.loaded = false;
    node.expand(); // 主动调用展开节点方法，重新查询该节点下的所有子节点
  }
};



const filterText = ref('')

watch(filterText, (val) => {
  treeRef.value!.filter(val)
});

const filterNode = (value: string, data: Tree) => {
  if (!value) return true
  return data.name.includes(value)
}

const nodeClick = (nodeData) => {
  emit('nodeClick',{
    nodeData:nodeData
  })
}
</script>
<style scoped lang="scss">
:deep(.el-tree-node.is-current > .el-tree-node__content ){
  color: #2B1DFF !important;
}
:deep(.el-tree-node > .el-tree-node__content ){
  color: #222222 !important;
}
  .input {
    padding: 0 8px 22px;
  }
  .span-ellipsis {
    display: block;
    overflow: hidden; //超出的文本隐藏
    text-overflow: ellipsis; //溢出用省略号显示
    -webkit-line-clamp: 1; // 超出多少行
    -webkit-box-orient: vertical;
    font-size: 12px;
  }
</style>
